<template>
	<view>
		<view class="search-container">
			<view class="search-area">
				<view class="city">{{ city }}</view>
				<view>
					<uni-search-bar clearButton="none" cancelButton="none" placeholder="想租什么,搜一搜" radius="100"
						maxlength="80" :width="350" v-model.trim="searchMsg" />
				</view>
				<view class="search-btn" :class="{btnActive:searchMsg}" @click="searchAbout">搜索</view>
			</view>
			<view class="titleBar" style="width: 100%;">
				<van-dropdown-menu z-index="2">
					<van-dropdown-item :value="value1" :options="option" @change="change()" />
				</van-dropdown-menu>
				<view style="padding: 30rpx;">
					<view @click="shouPopup">筛选
						<image :src="chooseImg" mode="" style="height: 30rpx; width: 30rpx;"></image>
					</view>
				</view>
			</view>
		</view>
		<view :style="{height:chunkHeight+'px'}"></view>
		<goods-card :item-list="itemList"></goods-card>
		<view style="font-size: 30rpx;">
			<van-popup :show="show" position="right" z-index="11"
				custom-style="height: 100%; width: 60%; background-color: #eee;" @close="onClose">
				<view class="top-box">
					<view class="top">
						<view class="">物流服务</view>
						<view class="types">
							<view :class="['normal', index === active ? 'active' : '']"
								v-for="(item, index) in LogisticsMode" :key="index" @click="chooseType(index, item)">
								{{ item.title }}
							</view>
						</view>
					</view>
					<view class="middle">
						<view class="mt40">租金范围</view>
						<view class="mt40">
							<view style="font-size: 25rpx; color: #999;">租金（元/天）</view>
							<view style="display: flex; margin-top: 20rpx;">
								<input class="input-style" type="number" placeholder="输入最低价" v-model.trim="min_price">
								<view style="margin-left: 20rpx;"> - </view>
								<input class="input-style" type="number" placeholder="输入最高价" v-model.trim="max_price">
							</view>
						</view>
					</view>
					<view class="bottom" style="display: flex">
						<view @click="onClose" class="onClose">重置</view>
						<view @click="submit" class="submit">提交</view>
					</view>
				</view>
			</van-popup>
		</view>
	</view>
</template>

<script>
	import {
		option,
		LogisticsMode
	} from "@/common/goodsList.js"
	import goodsCard from '@/components/goodsCard.vue';
	import chooseImg1 from "@/static/images/screen.png"
	import chooseImg2 from "@/static/images/screen-hover.png"
	export default {
		components: {
			goodsCard
		},
		onLoad(options) {
			this.cate_id = options.id;
			this.city = getApp().globalData.city;
			this.goods_name = options.val;
			this.getGoodsList();
		},
		mounted() {
			this.getNodeHeight();
		},
		data() {
			return {
				cate_id: 0,
				sort: 'desc',
				orderby_name: 'id',
				goods_name: "",
				min_price: "",
				max_price: "",
				convey_type: 1,
				/* 以上是请求参数 */
				show: false,
				city: '',
				searchMsg: '',
				active: null,
				option,
				value1: 0,
				LogisticsMode,
				itemList: [],
				chooseImg: chooseImg1,
				chunkHeight: 0,
			}
		},
		methods: {
			getNodeHeight() {
				const query = uni.createSelectorQuery().in(this);
				query.select('.search-container').boundingClientRect(data => {
					this.chunkHeight = data.height;
				}).exec();
			},
			searchAbout() { //按搜索触发
				if (!this.searchMsg) return;
				this.itemList.splice(0)
				this.goods_name = this.searchMsg;
				this.getGoodsList()
				this.searchMsg = ''
			},
			shouPopup() {
				this.show = true
				this.chooseImg = chooseImg2
			},
			chooseType(index, item) {
				this.active = index
				this.convey_type = item.type
			},
			onClose() {
				this.show = false
				this.active = null
				this.min_price = ''
				this.max_price = ''
				this.convey_type = ''
				this.chooseImg = chooseImg1;
			},
			change(value) {
				if (value.detail == 0) {
					this.orderby_name = "id";
					this.sort = 'desc'
				} else if (value.detail == 1) {
					this.orderby_name = 'min_price'
					this.sort = 'desc'
				} else if (value.detail == 2) {
					this.orderby_name = 'min_price'
					this.sort = 'asc'
				} else {
					this.orderby_name = 'update_time'
					this.sort = 'desc'
				}
				this.getGoodsList()
			},
			// 提交请求
			submit() {
				console.log(this.max_price);
				if (!this.convey_type || !this.min_price || !this.max_price) return
				let params = {
					sort: this.sort,
					cate_id: this.cate_id,
					orderby_name: this.orderby_name,
					goods_name: this.goods_name,
					min_price: Number(this.min_price).toFixed(2),
					max_price: Number(this.max_price).toFixed(2),
					convey_type: this.convey_type
				}
				uni.$http.post(`/Wechat/Goods/getGoodsList`, params)
					.then(res => {
						const data = res.data.data.data;

						for (let i in data) {
							data[i].imgurl = getApp().globalData.baseImg + data[i].imgurl
						}

						this.itemList = data;
						if (this.itemList.length == 0) uni.$showMsg('搜索不到相关商品，请重新搜索')
					})
				this.show = false
			},
			// 获取商品列表
			getGoodsList() {
				let params = {
					cate_id: this.cate_id,
					sort: this.sort,
					orderby_name: this.orderby_name,
					goods_name: this.goods_name,
					convey_type: this.convey_type
				}
				uni.$http.post(`/Wechat/Goods/getGoodsList`, params).then(res => {
					const {
						data
					} = res.data.data
					for (let i in data) {
						data[i].imgurl = getApp().globalData.baseImg + data[i].imgurl
						if (data[i].rent_label !== "") {
							data[i].rent_label = data[i].rent_label.split(",")
						}
					}
					this.itemList = data
				})
			}
		}
	}
</script>

<style scoped>
	::v-deep .van-dropdown-menu {
		box-shadow: none !important;
	}

	.submit {
		background-color: #ff0000;
		color: #fff;
		border-radius: 0 30rpx 30rpx 0;
		padding: 10rpx 40rpx;
		font-size: 25rpx;
		margin-left: 20rpx;
	}

	.onClose {
		color: #999;
		background-color: #dfdfdf;
		border-radius: 30rpx 0 0 30rpx;
		padding: 10rpx 40rpx;
		font-size: 25rpx;
	}

	.input-style {
		background-color: #fff;
		width: 100rpx;
		font-size: 20rpx;
	}

	.mt40 {
		margin-top: 40rpx;
	}

	.top-box {
		padding: 10rpx 30rpx;
		margin-top: 220rpx;
		height: calc(100vh - 220rpx);
		box-sizing: border-box;
		position: relative;
	}

	.top-box .bottom {
		position: absolute;
		bottom: 50rpx;
	}

	.types {
		display: flex;
		margin-top: 20rpx;
	}

	.city {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		max-width: 100rpx;
		display: inline-block;
	}

	.search-container {
		position: fixed;
		font-size: 30rpx;
		top: 0;
		z-index: 999;
		background-color: #fff;
		width: 100%;
	}

	.search-area {
		z-index: 1;
		background-color: #fff;
		display: flex;
		justify-content: space-around;
		align-items: center;
		padding-top: 20rpx;
	}

	.uni-search-bar {
		width: 220rpx;
	}

	.uni-searchbar {
		padding: 16rpx;
	}

	.van-dropdown-menu {
		box-shadow: 0 2px 12px rgb(255 255 255 / 12%);
	}

	.van-dropdown-menu--top-bottom {
		box-shadow: 0 2px 12px rgb(255 255 255 / 12%);
	}

	.search-btn {
		width: 100rpx;
		height: 62rpx;
		text-align: center;
		line-height: 62rpx;
		border-radius: 25rpx;
		color: white;
		background-color: #d3d3d3;
	}

	.search-btn.btnActive {
		background-color: #ff0000;
	}

	.normal {
		font-size: 20rpx;
		padding: 10rpx 25rpx;
		background-color: #dfdfdf;
		color: #999;
		margin-right: 20rpx;
	}

	.active {
		background-color: #ff0000;
		color: #fff;
		font-size: 20rpx;
		padding: 10rpx 25rpx;
		margin-right: 20rpx;
	}

	.search-button button {
		margin-top: 15rpx;
		border-radius: 25rpx;
		background-color: red;
		color: #fff;
		height: 50rpx;
		line-height: 50rpx;
	}

	.screen-area {
		background-color: #fff;
	}

	.screen-popup {
		z-index: 3;
	}

	.popup-content-top {
		z-index: 0;
		height: 300rpx;
	}

	.popup-content-right {
		width: 350rpx;
		padding: 20rpx;
	}

	.LogisticsModeItem {
		display: inline;
		border: 1rpx solid red;
		width: 80rpx;
		height: 20rpx;
	}

	.uni-form-item .title {
		padding: 20rpx 0;
	}

	.uni-btn-v {
		position: fixed;
		bottom: 0rpx;
	}

	.titleBar {
		display: flex;
		justify-content: space-between
	}

	.van-dropdown-menu {
		box-shadow: 0 2px 12px rgb;
	}
</style>
